<template>
  <el-row class="tac">
    <el-col>
      <el-menu default-active="2" class="el-menu-vertical-demo">
        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
            <el-menu-item index="1-3">item three</el-menu-item>
            <el-menu-item index="1-3">item three</el-menu-item>
        </el-sub-menu> -->

        <el-sub-menu
          :index="index +' 1'"
          v-for="(item, index) in routes"
          :key="index"
        >
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{ item.name }}</span>
          </template>

          <template v-for="(it, indx) in item.children" :key="indx">
            <el-menu-item @click="clickItemHandle(it.value)">{{
              it.name
            }}</el-menu-item>
          </template>
        </el-sub-menu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import { reactive, toRefs, computed } from "vue";
import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    const state = reactive({
      routes: [
        {
          path: "/",
          name: "Dashboard",
          value: "Dashboard",
          children: [
            {
              path: "carparkDashboard",
              name: "Carpark Dashboard",
              value: "/home/carparkDashboard",
              //   component: PageOne,
            },
            {
              path: "Evdashboard",
              name: "Evdashboard",
              value: "/home/evdashboard",
            },
          ],
        },
        {
          path: "/navigation",
          name: "导航二",
          show: true,
          //   component: Index,
          children: [
            {
              path: "/PageThree",
              name: "页面3",
              //   component: PageThree,
            },
          ],
        },
      ],
    });

    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath);
    };
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath);
    };

    const clickItemHandle = (value) => {
      console.log(value);
      router.push(value);
    };

    // computer
    // let noChildren = computed(() => {
    //   return state.navList.filter((item) => !item.children);
    // });

    return {
      ...toRefs(state),
      clickItemHandle,
      handleOpen,
      handleClose,
    };
  },
};
</script>

<style lang="scss" scoped></style>
